<template>
    <h2>房型管理修改</h2>
    <table class="table table-bordered">
        <tbody>
            <tr>
                <td>房间类型</td>
                <td>
                    <input type="text" v-model="form.name">
                </td>
            </tr>
            <tr>
                <td>图片</td>
                <td>
                    <img :src="form.pic" style="display: '';max-width: 100px;max-height: 100px;">

                    <input type="file" style="display: '';" id="file" @change="TuPian">
                </td>
            </tr>
            <tr>
                <td>面积</td>
                <td>
                    <input type="text" v-model="form.cm">
                </td>
            </tr>
            <tr>
                <td>是否有窗</td>
                <td>
                    <input type="radio" v-model="form.isyes" value="有">有
                    <input type="radio" v-model="form.isyes" value="无">无
                </td>
            </tr>
            <tr>
                <td>价格</td>
                <td>
                    <input type="text" v-model="form.price">
                </td>
            </tr>
            <tr>
                <td>入住人数</td>
                <td>
                    <input type="text" v-model="form.ruzhu">
                </td>
            </tr>
            <tr>
                <td>状态</td>
                <td>
                    <input type="radio" v-model="form.zhuangTai" value="启用">启用
                    <input type="radio" v-model="form.zhuangTai" value="禁用">禁用
                </td>
            </tr>
            <tr>
                <td>时间</td>
                <td>
                    <input type="date" v-model="form.time">
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <button class="btn btn-primary" @click="Add">修改</button>
                </td>
            </tr>
        </tbody>
    </table>
</template>
<script setup lang="ts">
//引入组件
import { ref, reactive, onMounted } from "vue"
//bootstrap样式
import "bootstrap/dist/css/bootstrap.min.css"
//访问后端
import axios from "axios"
//路由(1)
import { useRouter, useRoute } from "vue-router";

const router = useRouter();
const route = useRoute();

const roomList = ref([])

const form = reactive({
    id: 0,
    name: "",
    pic: "",
    cm: "",
    isyes: "有",
    price: "",
    ruzhu: "",
    zhuangTai: "启用",
    time: ""
})
const Add = () => {
    if (!form.name) {
        alert("名称不能为空！");
        return;
    }
    if (!form.pic) {
        alert("图片不能为空！");
        return;
    }
    if (!form.cm) {
        alert("面积不能为空！");
        return;
    }
    if (!form.isyes) {
        alert("是否不能为空！");
        return;
    }
    if (!form.price) {
        alert("价格不能为空！");
        return;
    }
    if (!form.ruzhu) {
        alert("入住人数不能为空！");
        return;
    }
    if (!form.time) {
        alert("时间不能为空！");
        return;
    }
    axios.put("http://localhost:5256/api/RoomType/Update", form).then(res => {
        if (res.data > 0) {
            alert("修改成功！！");
            router.push("/roomTypeShow");
        }
        else {
            alert("修改失败！！");
        }
    })
}
//、、、、、、、、、、、、
const TuPian = (e: any) => {
    //定义菜单
    var formData = new FormData();
    //上传的文件信息
    var file = e.target.files[0];

    formData.append("file", file)

    axios.post("http://localhost:5256/api/RoomType/Pic", formData).then(res => {
        form.pic = res.data;
    }).catch(err => {
        console.log(err)
    })

}
//反填
const Fantian = () => {
    axios.get("http://localhost:5256/api/RoomType/GetType?id=" + route.query.id).then(res => {
        let d = res.data;
        form.cm = d.cm;
        form.pic = d.pic;
        form.time = d.time;
        form.ruzhu = d.ruzhu;
        form.name = d.name;
        form.isyes = d.isyes;
        form.price = d.price;
        form.zhuangTai = d.zhuangTai;
        form.id = d.id;


    })
}
</script>